<template>
  <el-dialog
    title="新建直播"
    :visible.sync="$attrs.visableIf"
    @close="handleCloseDialog"
    width="1000px"
    append-to-body
    class="borderb_dia dialog_nopadd"
  >
    <div class="addheader flex aligncenter">
      <div
        v-for="(item, index) in stepList"
        :key="index"
        class="flex aligncenter stepitem c_text3"
        :class="{ active: step == item.id, nextactive: step > item.id,flexno:item.id==2 }"
      >
        <div
          v-if="step > item.id"
          class="circle mr-8 textcenter circleicon c_primary"
        >
          <i class="el-icon-check fw-5 f-15"></i>
        </div>
        <div v-else class="circle mr-8 f-12 textcenter">{{ item.id }}</div>
        <div class="f-14 pr-12" :class="{addtitle:step==1}">{{ item.title }}</div>
      </div>
    </div>
    <div class="taskcontent flex">
      <!-- <add-group v-if="step == 1" />
      <add-master v-if="step == 2" /> -->
      <add-transpond v-if="step == 1" />
      <!-- <el-form> -->
      <el-form ref="form" v-if="step == 2" :model="form" label-position="top" size="small" class="p-20 w_full">
        <el-form-item label="设置转发消息">
          <div class="formitembg bg_f5 flex aligncenter plr-16">
            <el-checkbox-group v-model="form.type">
              <el-checkbox
                v-for="(item, index) in typeList"
                :key="index"
                :label="item.value"
              ><span class="c_text2">{{item.label}}</span></el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="设置转播开始">
          <div class="formitembg bg_f5 flex aligncenter plr-16">
            <el-radio-group v-model="form.zb_type">
              <el-radio
                v-for="(item, index) in zbList"
                :key="index"
                :label="item.value"
              > <span class="c_text2">{{item.label}}</span></el-radio>
            </el-radio-group>
            <el-date-picker
              v-if="form.zb_type==3"
              v-model="form.times"
              type="datetime"
              placeholder="选择日期时间"
              class="ml-20"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="设置转发消息">
          <div class="formitembg bg_f5 flex aligncenter plr-16">
            <el-radio-group v-model="form.zf_type">
              <el-radio :label="1" > 
                <span class="c_text2">手动结束</span>
              </el-radio>
              <el-radio :label="2"> 
                <span class="c_text2">定时结束</span>
              </el-radio>
            </el-radio-group>
            <el-date-picker
              v-if="form.zf_type==2"
              v-model="form.times"
              type="datetime"
              placeholder="选择日期时间"
              class="ml-20"
            ></el-date-picker>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button v-if="step == 1" size="small" @click="handleCloseDialog"
        >取消</el-button
      >
      <el-button v-else size="small" @click="last">上一步</el-button>
      <el-button size="small" v-if="step <= 3" type="primary" @click="next"
        >下一步</el-button
      >
      <el-button size="small" v-else type="primary" @click="submitForm"
        >创建</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import AddGroup from "./components/AddGroup.vue";
import AddMaster from "./components/AddMaster.vue";
import AddTranspond from "./components/AddTranspond.vue";

// import { validPhone, validPassword } from "@/utils/validate";
// import { editInfo } from "@/api/advmaster";
export default {
  components: { AddGroup, AddMaster, AddTranspond },
  data() {
    return {
      step: 1,
      stepList: [
        { id: 1, title: "添加转播群", isfinsh: false },
        { id: 2, title: "设定任务参数", isfinsh: false },
      ],
      form: {
        name: "",
        min: 5,
        max: 10,
        type:[],
        zb_type:'',
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        email: [
          {
            required: true,
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: "blur",
          },
        ],
        password: [],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
      typeList: [
        { label: "文字", value: 1 },
        { label: "图片", value: 2 },
        { label: "视频", value: 3 },
        { label: "文件", value: 4 },
        { label: "链接", value: 5 },
        { label: "小程序", value: 6 },
        { label: "视频号", value: 7 },
        { label: "表情包", value: 8 },
      ],
      zbList: [
        { label: "立即开始", value: 1 },
        { label: "手动开始", value: 2 },
        { label: "定时开始", value: 3 },
      ],
    };
  },
  props: {
    rowitem: {
      default: null,
    },
  },
  created() {},
  methods: {
    handleCloseDialog() {
      this.$emit("update:visableIf", false);
    },

    onBlur(type) {
      // 使用正则表达式匹配正整数
      const regex = /^[1-9]\d*$/;
      // 如果输入的值不是正整数，则将其设置为上一个有效值
      if (!regex.test(this.form[type])) {
        if (type == "min") {
          this.form.min = 5;
        } else {
          this.form.max = 10;
        }
      } else {
        if (this.form[type] > 999) {
          this.form[type] = 999;
        }
      }
    },

    handleDefault() {
      this.form.min = 5;
      this.form.max = 10;
    },

    last() {
      this.step = this.step - 1;
    },

    next() {
      this.step = this.step + 1;
    },

    submitForm: function () {
        this.handleCloseDialog()
    //   this.$refs["form"].validate((valid) => {
    //     if (valid) {
    //       if (this.form.id != undefined) {
    //         // editInfo(this.form).then(() => {
    //         //   this.$modal.msgSuccess('修改成功')
    //         //   this.handleCloseDialog();
    //         //   this.$emit('getList');
    //         // })
    //       }
    //     }
    //   });
    },
  },
};
</script>

<style scoped lang="scss">
.addheader {
  height: 64px;
  padding: 0 200px;
  border-bottom: 1px solid #e9e9e9;
}
.stepitem {
  position: relative;
  flex: 1 1;
  overflow: hidden;
  vertical-align: top;
  padding-left: 12px;
  &:first-child {
    padding-left: 0;
  }
  .circle {
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 100%;
    border: 1px solid rgba(0, 0, 0, 0.25);
  }
  .addtitle {
    position: relative;
    &::after {
      position: absolute;
      content: "";
      left: 100%;
      display: block;
      height: 1px;
      background: #e9e9e9;
      width: 999px;
      top: 12px;
    }
  }
  &:last-child .addtitle {
    padding-right: 0;
    &::after {
      width: 0;
    }
  }
  &.active {
    .circle {
      background-color: #3070ff;
      border-color: #3070ff;
      color: #fff;
    }
    .addtitle {
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .circleicon {
    background-color: #fff;
    border-color: #3070ff;
  }
  &.nextactive {
    .addtitle::after {
      background-color: #3070ff;
    }
  }
  &.flexno{
    flex: none;
  }
}
.taskcontent {
  height: 462px;
  width: 100%;
}
.formitembg {
  height: 56px;
  border: 1px solid #e9e9e9;
}
</style>
